Chrome浏览器如何打开调试工具

Chrome浏览器及基于Chromium内核的Edge应该是目前最流行的桌面浏览器了。

前端小伙伴进来一看标题，此文莫非是超纯净水？不就是一句的事儿吗？4个字：按F12，结束。

确实，大部分情况下这样就轻松打开了调试工具，但你有没有想过F12快捷键被其他系统快捷键占用了、甚至于说有些异型键盘没有F12等等情况怎么办？还有正好F12键坏了呢？事实上Edge作为微软产品，它的F12能被组策略禁用的，有的公司就有在域组策略强制关闭F12（生产环境、非开发环境）以确保网站安全，比如我们公司，Chrome也有企业版支持组策略这么搞。

所以，除了按F12，还有哪些方式可以打开浏览器调试工具呢？

1. 另一个不常用的快捷键组合: Ctrl+Alt+I

2. 不用键盘，用鼠标，点浏览器左上角三个小点点，出来菜单，找到开发人员工具（这里就不详细说菜单路径了，不同版本还不太一样）

我截图一下我目前使用的Edge

看到这个菜单的快捷方式吗？对了，这就是1里说的那个。

我们公司的一个业务系统是一进去就全屏的，禁用了导航栏和菜单栏，这时候还好Ctrl+ALT+I还能用，当然我们IT开发人员没问题的时候不会去在生产环境打开它，留着这个快捷键组合也是备着万一出问题我们到现场可以看到console日志、排查问题。

那到这里基本就说完了，小伙伴们还满意吗？

嘿嘿，其实就算F12没禁掉，但你可能经常遇到这样的情况，就是网页一打开就飞快地跑，你的手速根本来不及打开F12看到打开调试工具之前的网络日志（console日志会保留），这时候怎么办？

其实Chrome帮你想到了这点，就是到开发工具的设置页里找到”针对弹出窗口自动打开DevTools“这个选项，把它勾选了，然后你做一个前导页面，这个页面上做个按钮可以用window.open打开你要调试的目标页面，在前导页面先把DevTools打开，然后点击打开按钮，你就发现，新打开的页面自动把DevTools打开了，从而再也不用担心遗漏什么重要信息啦。

（补充一点：有人说先打开DevTools，再刷新页面也能看到页面最初加载的情况，确实，大部分情况可以这样，但很多页面应用，打开和刷新的效果不完全一致，例如后台帮您做了redirect，你按F5刷新时的页面URL其实已经不是最初打开的URL，你还是会错过一些东西的）

打开DevTools的目的是为了排查和调试代码，还有办法不打开DevTools也能调，比如用VSCode的Edge或Chrome插件，可以通过VsCode调试器唤起Edge，同时接管浏览器的代码调试。

除了上述几个办法，还有没有其他的呢？欢迎大家留言补充~